<template>
  <!-- 单据提交弹出页 -->
  <div>
    <div v-if="confirmLoading" class="zhezhao" style="text-align: center">
      <a-spin />
    </div>
    <a-modal
      style="top: 25px"
      :visible="approveVisible"
      :closable="true"
      :confirm-loading="confirmLoading"
      @cancel="closeModal"
      :dialogStyle="{left:(!flag?'80px':''),top:'10px'}"
    >
      <span slot="footer">
        <!--<a-button type="primary" @click="handleOkApprove">
          通过
        </a-button>
        <a-button type="danger" @click="handleCancelApprove">
          驳回
        </a-button>-->
      </span>
      <a-form :form="form" layout="horizontal" labelAlign="left">
        <div style="margin-top: 30px;">
          <a-timeline>
            <a-timeline-item
              v-for="item in timeLineData"
              :key="item.id"
              :color="item.bxzt === '5' ? 'red' : 'green'"
            >
              <!--<div>报销金额：{{item.bxje}}</div>-->
              <div v-if="item.bxzt === '2'">{{ item.bxztName }}</div>
              <div v-if="item.bxzt === '2'">提交人：{{ item.crtName }}</div>
              <div v-if="item.bxzt === '2'">提交时间：{{ item.crtTime }}</div>
              <div v-if="item.bxzt !== '2'">审批意见：{{ item.spyj }}</div>
              <div v-if="item.bxzt !== '2'">审批人：{{ item.crtName }}</div>
              <div v-if="item.bxzt !== '2'">审批时间：{{ item.crtTime }}</div>
            </a-timeline-item>
          </a-timeline>
        </div>
        <a-form-item label="签发日期" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-date-picker
            style="width: 100%"
            :disabled="disabledType"
            v-decorator="['qfrq', { rules: [{ required: true, message: '请填写签发日期' }] }]"
          />
        </a-form-item>
        <!-- <a-form-item
          label="结算方式"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-select :disabled="disabledType" v-decorator="['jsfs', { initialValue: '1',rules: [{ required: true, message: '请填写结算方式' }] }]">
            <a-select-option value="1">电汇</a-select-option>
            <a-select-option value="2">现金</a-select-option>
            <a-select-option value="3">其他</a-select-option>
          </a-select>
        </a-form-item>-->
        <a-form-item label="收款人" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input
            :disabled="disabledType"
            v-decorator="['skr', { rules: [{required: true, message: '请填写收款人'}] }]"
          />
        </a-form-item>
        <!-- <a-form-item
          label="收款账号"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input :disabled="disabledType" v-decorator="['yhkh', { rules: [{required: true, message: '请填写收款账号'}] }]"/>
        </a-form-item>
        <a-form-item
          label="收款银行"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol">
          <a-input :disabled="disabledType" v-decorator="['yhmc', { rules: [{required: true, message: '请填写收款银行'}] }]"/>
        </a-form-item>-->
        <a-form-item label="金额" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number
            style="width:100%"
            :disabled="disabledType"
            :min="0"
            :max="999999"
            :precision="2"
            :formatter="value => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
            :parser="value => value.replace(/\$\s?|(,*)/g, '')"
            v-decorator="['fyhj']"
          />
        </a-form-item>
        <a-form-item label="事由" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea
            allowClear
            :disabled="disabledType"
            v-decorator="['bxsy', { rules: [{required: true, message: '请填写事由'}] }]"
          />
        </a-form-item>
        <a-form-item label="备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea v-decorator="['bz']" :disabled="disabledType" allowClear />
        </a-form-item>
        <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center"></a-form-item>
        <a-form-item label="审批意见" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea v-model="spyj" />
        </a-form-item>
        <div style="width: 100%;text-align: right;">
          <a-button v-if="bxzt === '6'" type="primary" :disabled="buttonLoading" @click="handleOkApprove">打款</a-button>
          <a-button v-if="bxzt !== '6'" type="primary" :disabled="buttonLoading" @click="handleOkApprove">通过</a-button>
          <a-button type="danger" :disabled="buttonLoading" @click="handleCancelApprove" style="margin-left: 10px">驳回</a-button>
        </div>
      </a-form>
    </a-modal>
  </div>
</template>
<script>
import { query, method } from '@/api/admin'
import moment from 'moment'
import { mapGetters } from 'vuex'
export default {
  data () {
    return {
      approveVisible: false,
      // 响应式布局
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      form: this.$form.createForm(this),
      confirmLoading: false,
      bxdh: '',
      bxzt: '',
      timeLineData: [],
      spyj: '',
      disabledType: true,
      buttonLoading: false,
      flag: navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i),
      roleIds: []
    }
  },
  computed: {
    ...mapGetters(['wxid', 'token'])
  },
  props: {
    // 选择的报销单id
    ids: {
      type: Array,
      required: true
    },
    expensetype: {
      type: String,
      required: false,
      default: ''
    }
  },
  created () {
    // const u = navigator.userAgent
    // // ios页面输入框失焦要页面重置到顶部
    // if (u.match(/\(i[^]+( U)? CPU.+Mac OS X/)) { // 判断是否是ios端
    //   let aflag = false
    //   let pageBackNormFunc
    //   document.body.addEventListener('focusin', () => {
    //     // 软键盘弹起事件
    //     aflag = true
    //     pageBackNormFunc && clearTimeout(pageBackNormFunc)
    //   })
    //   document.body.addEventListener('focusout', () => {
    //     // 软键盘关闭事件
    //     if (aflag) {
    //       pageBackNormFunc = setTimeout(function () { // // 当键盘收起的时候让页面回到原始位置
    //         window.scrollTo({ top: 0, behavior: 'smooth' })
    //       }, 200)
    //     }
    //     aflag = false
    //   })
    // }
  },
  methods: {
    begin (idss) {
      this.approveVisible = true
      this.bxdh = idss[0].bxdh
      this.bxzt = idss[0].bxzt
      this.getInfo()
      this.getHistory()
      this.buttonLoading = false
    },
    closeModal () {
      this.form.resetFields()
      this.approveVisible = false
    },
    /**
     * 获取人员信息
     */
    getInfo () {
      console.log('idssss', this.ids)
      this.$nextTick(() => {
        this.form.setFieldsValue({
          qfrq: this.ids[0].qfrq
            ? moment(this.ids[0].qfrq).format('YYYY-MM-DD')
            : '',
          fyhj: this.ids[0].fyhj,
          skr: this.ids[0].crtName,
          yhkh: this.ids[0].yhkh,
          yhmc: this.ids[0].yhmc,
          bxsy: this.ids[0].bxsy,
          bz: this.ids[0].bz
        })
      })
    },
    getHistory () {
      console.log('bxdh', this.bxdh)
      query('/wb/ribs/historyQuery', 'GET', { bxdh: this.bxdh }, {})
        .then(res => {
          this.timeLineData = res.result.data
          console.log('resbxdh', res.result.data)
        })
        .catch(() => {
          this.$notification['info']({
            message: '获取人员信息失败',
            duration: 4
          })
        })
    },

    // 确认
    handleOkApprove () {
      this.confirmLoading = true
      this.buttonLoading = true
      const param = this.ids
      if (this.spyj.split(' ').join('').length === 0) {
        this.spyj = '同意'
      }
      param[0].yj = this.spyj
      param[0].bxyj = '1'
      this.actionParam = {
        url: '/wb/ribs/approve',
        action: 'PUT',
        parameter: {},
        data: param,
        message: '审批成功'
      }
      // 调用请求
      return method(this.actionParam).then(res => {
        // 关闭编辑框
        this.approveVisible = false
        // 刷新列表
        this.$emit('close')
        this.$store.commit('SET_HISTORY_REFRESH_FLAG', true)
        this.form.resetFields()
        this.confirmLoading = false
      })
    },
    handleCancelApprove () {
      if (this.spyj.split(' ').join('').length === 0) {
        this.$notification['info']({
          message: '请填写审批意见',
          duration: 4
        })
        return
      }
      this.confirmLoading = true
      const param = this.ids
      param[0].yj = this.spyj
      param[0].bxyj = '0'
      this.actionParam = {
        url: '/wb/ribs/approve',
        action: 'PUT',
        parameter: {},
        data: param,
        message: '审批成功'
      }
      // 调用请求
      return method(this.actionParam).then(res => {
        // 刷新列表
        this.$emit('close')
        this.$store.commit('SET_HISTORY_REFRESH_FLAG', true)
        this.form.resetFields()
        this.confirmLoading = false
        // 关闭编辑框
        this.approveVisible = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
  .zhezhao {
    height: 100%;
    background: rgba(0, 0, 0, 0.05);
    padding-top: 300px;
    width: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 9999;
  }
</style>
